<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
    <meta charset="utf-8">
    <title>统计概览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/staff/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/staff/layout/css/font_eolqem241z66flxr.css" media="all" />
    <script type="text/javascript" src="/staff/layout/js/jquery.min.js"></script>

</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote news_search">
    <form class="layui-form" id="form" action="/admin/area/index" method="get">
    <div class="layui-inline" style="width: 70px;height: 70px;background: #2fa89d;border-radius: 50%;margin-right: 2%;"><img src="/staff/overview/img/tj.png" style="width:50px;margin-top:10px;margin-left:10px;"></div>
        <div class="layui-input-inline" style="margin-top: 5px;margin-right: 20px; ">
            <label class="layui-form-label" style="padding: 0;width:96px;margin-top: 1px;height: 36.4px;background:#189f92;;;text-align: center;line-height: 36.4px;">选择统计时间</label>
            <div class="layui-input-inline">
                <input class="layui-input" value="" name="ftime" placeholder="开始日" id="LAY_demorange_s">
            </div>
            <div class="layui-input-inline">
                <input class="layui-input" value="" name="ltime" placeholder="截止日" id="LAY_demorange_e">
            </div>
        </div>
        <div class="layui-input-inline" style="">
            <a class="layui-btn search_btn" style="margin-top: 5px;    background-color: #1e9c05;" id="select">查询</a>
        </div>
    </form>
</blockquote>
<blockquote class="layui-elem-quote">
    <div style="height:290px; width: 100%;">
        <div style="width: 18%; float: left; " >
            <div style="float: left;margin-left: 2%"><img src="/staff/layout/img/rwxq1.png"></div>
            <div style=" float:right">
              <p style="font-size: 30px;font-weight: bold;margin-bottom: 15px;margin-left: -5px;color: #189f92;">任务详情</p>
              <p style="text-align: left;line-height: 24px;width: 102px;">任务总数<span style="color: red"> {{$all}} </span>条</p>
              <p style="text-align: left;line-height: 24px;margin-top: 10px; width: 108px;">已完成任务<span  style="color: red"> {{$fcount}} </span>条</p>
              <p style="text-align: left;line-height: 24px;margin-top: 10px;width: 100px;">未完成任务<span  style="color: red"> {{$ucount}} </span>条</p>
              <hr style="height:1px;width: 166px; border:none;border-top:1px dashed #0066CC;" />
              <p style="text-align: left;line-height: 24px;margin-top: 10px;width: 152px;">完工率:<span  style="color: red">@if($all) {{$fcount/$all*100}}% @endif </span></p>
            </div>
        </div>
        <div style="width: 80%;float: left;">
            <div id="container" style="width: 100%; height:340px;"></div>
        </div>

    </div>
</blockquote>
<div class="" style="margin-top: -10px ! important;">
    <table class="layui-table">
        <thead>
        <tr>
            <th style="width: 25%;text-align: center;">工单</th>
            <th style="width: 25%;text-align: center;">所属区域</th>
            <th style="width: 25%;text-align: center;">地址</th>
            <th style="width: 25%;text-align: center;">任务状态</th>

        </tr>
        </thead>
        <tbody class="news_content">
        @if(!empty($data))
            @foreach($data as $v)
                <tr>
                    <td style="color:red;text-align: center;">{{$v['num']}}</td>
                    <td style="text-align: center;">{{$v['aname']}}</td>
                    <td style="text-align: center;color: green">{{$v['rname']}}</td>
                    <td style="text-align: center;color:red;">@if($v['status'] == 0) 未完成 @else 已完成 @endif</td>
                </tr>
            @endforeach
        @endif
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript" src="/pc/layui/layui.js"></script>
<!-- <script type="text/javascript" src="/pc/area/js/area.js"></script> -->
<script src="/staff/overview/js/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
    layui.config({
        base : "js/"
    }).use(['form','layer','jquery','laypage','element','laydate'],function(){
        var laydate = layui.laydate;
        var form = layui.form(),
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            laypage = layui.laypage,
            $ = layui.jquery;
        var start = {
            // min: laydate.now()
            min:  '2000-06-16 23:59:59'
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: '2000-06-16 23:59:59'
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
        }

    })

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var   option = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['完成任务量','已完成任务量']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'完成任务量',
                type:'line',
                stack: '总量',
                data:[12, 13, 10, 13, 9, 2, 0]
            },
            {
                name:'已完成任务量',
                type:'line',
                stack: '总量',
                data:[12, 13, 10, 12, 9, 2, 0]
            }
        ]
    };
    myChart.setOption(option);
     setTimeout(function (){  
           window.onresize = function () {      
               myChart.resize();  
                    }  
                },200) 
</script>
</html>